:root {
	/*
	* Color palette
	*/
	--color-dark-100: #0c0d0f;
	--color-dark-90: #1e232a;
	--color-dark-80: #2e343e;
	--color-dark-70: #53585f;
	--color-dark-30: #9da2a9;
	--color-dark-20: #caced1;
	--color-dark-10: #e0e5e8;
	--color-dark-05: #f1f2f4;
	--color-dark-blue: #175cc4;
	--color-blue: #1d74f5;
	--color-light-blue: #4eb2f5;
	--color-lighter-blue: #e8f2ff;
	--color-purple: #861da8;
	--color-red: #f5455c;
	--color-dark-red: #e0364d;
	--color-orange: #f38c39;
	--color-yellow: #ffd21f;
	--color-dark-yellow: #f6c502;
	--color-green: #2de0a5;
	--color-dark-green: #26d198;

	/*
	* General Colors
	*/
	--color-darkest: #1f2329;
	--color-dark: #2f343d;
	--color-dark-medium: #414852;
	--color-dark-light: #6c727a;
	--color-gray: #9ea2a8;
	--color-gray-medium: #cbced1;
	--color-gray-light: #e1e5e8;
	--color-gray-lightest: #f2f3f5;
	--color-black: #000000;
	--color-white: #ffffff;

	/* #region colors Colors */
	--rc-color-error: var(--color-red);
	--rc-color-error-light: #e1364c;
	--rc-color-alert: var(--color-yellow);
	--rc-color-alert-light: var(--color-dark-yellow);
	--rc-color-success: var(--color-green);
	--rc-color-success-light: #25d198;
	--rc-color-button-primary: var(--color-blue);
	--rc-color-button-primary-light: var(--color-dark-blue);
	--rc-color-alert-message-primary: var(--color-blue);
	--rc-color-alert-message-primary-background: #f1f6ff;
	--rc-color-alert-message-secondary: #7ca52b;
	--rc-color-alert-message-secondary-background: #fafff1;
	--rc-color-alert-message-warning: #d52d24;
	--rc-color-alert-message-warning-background: #fff3f3;
	--rc-color-primary: var(--color-dark);
	--rc-color-primary-background: var(--color-dark);
	--rc-color-primary-darkest: var(--color-darkest);
	--rc-color-primary-dark: var(--color-dark-medium);
	--rc-color-primary-light: var(--color-gray);
	--rc-color-primary-light-medium: var(--color-gray-medium);
	--rc-color-primary-lightest: var(--color-gray-lightest);
	--rc-color-content: var(--color-white);
	--rc-color-link-active: var(--rc-color-button-primary);

	/* #endregion */

	/* #region colors Old Colors */
	--content-background-color: #ffffff;
	--primary-background-color: #04436a;
	--primary-font-color: #444444;
	--primary-action-color: #1d74f5;
	--secondary-background-color: #f4f4f4;
	--secondary-font-color: #a0a0a0;
	--secondary-action-color: #dddddd;
	--component-color: #f2f3f5;
	--pending-color: #fcb316;
	--error-color: #bc2031;
	--success-color: #2de0a5;
	--selection-color: #02acec;
	--attention-color: #9c27b0;

	/* #endregion */

	/* #region less-colors Old Colors (minor) */
	--tertiary-background-color: var(--component-color);
	--tertiary-font-color: var(--transparent-lightest);
	--link-font-color: var(--primary-action-color);
	--info-font-color: var(--secondary-font-color);
	--custom-scrollbar-color: var(--transparent-darker);

	/* #endregion */

	/* #region fonts Fonts */
	--body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Meiryo UI', Arial, sans-serif;

	/* #endregion */

	/*
	* General
	*/
	--text-size: 0.875rem;
	--header-min-height: 60px;
	--toolbar-height: 55px;
	--footer-min-height: 70px;
	--rooms-box-width: 280px;
	--flex-tab-width: 380px;
	--flex-tab-webrtc-width: 400px;
	--flex-tab-webrtc-2-width: 850px;
	--border: 2px;
	--border-radius: 2px;
	--rc-status-online: var(--rc-color-success);
	--rc-status-away: var(--rc-color-alert);
	--rc-status-busy: var(--rc-color-error);
	--rc-status-invisible: var(--color-gray-medium);
	--rc-status-offline: var(--transparent-darker);
	--rc-status-invisible-sidebar: var(--rc-color-primary-darkest);
	--default-padding: 1.5rem;
	--default-small-padding: 1rem;
	--status-bullet-size: 10px;
	--status-bullet-radius: 50%;
	--account-username-weight: 700;
	--status-name-weight: 400;
	--default-font-weight-header: 500;

	/*
	* General Typography
	*/
	--text-default-size: 1rem;
	--text-default-weight: 500;
	--text-small-size: 0.875rem;
	--text-small-weight: 500;
	--text-heading-size: 1.375rem;
	--text-heading-weight: 700;
	--text-label-size: 075rem;
	--text-label-weight: 600;
	--text-tiny-size: 075rem;
	--text-tiny-weight: 400;
	--text-micro-size: 0.625rem;
	--text-micro-weight: 700;

	/*
	* Forms
	*/
	--gap-between-elements: 2.5rem;
	--label-margin-bottom: 1rem;

	/*
	* Forms - Button
	*/
	--button-square-size: 36px;
	--button-padding: 0.782rem;
	--button-padding-small: 0 0.5rem;
	--button-height-small: 28px;
	--button-text-size-small: 13px;
	--button-text-size: var(--input-font-size);
	--button-border-width: var(--border);
	--button-border-radius: var(--border-radius);
	--button-disabled-background: var(--color-gray-light);
	--button-disabled-text-color: var(--color-white);
	--button-primary-background: var(--rc-color-button-primary);
	--button-primary-text-color: var(--color-white);
	--button-cancel-color: var(--rc-color-error);
	--button-secondary-background: var(--color-gray-medium);
	--button-secondary-text-color: var(--color-dark-medium);

	/*
	* Forms - Input
	*/
	--input-font-size: 0.875rem;
	--input-title-text-size: var(--input-font-size);
	--input-title-color: #2d343d;
	--input-text-color: var(--color-dark-medium);
	--input-placeholder-color: var(--color-gray-medium);
	--input-icon-color: var(--color-dark);
	--input-border-color: var(--color-gray-light);
	--input-border-width: var(--border);
	--input-border-radius: var(--border-radius);
	--input-description-text-color: var(--color-gray);
	--input-description-text-size: var(--input-font-size);
	--input-error-color: var(--rc-color-error);

	/*
	* Forms - popup list
	*/
	--popup-list-border-radius: var(--border-radius);
	--popup-list-background: var(--color-white);
	--popup-list-background-hover: var(--color-gray-lightest);
	--popup-list-selected-background: var(--color-gray-lightest);
	--popup-list-name-color: #2d343d;
	--popup-list-name-size: 1rem;

	/*
	* Forms - tags
	*/
	--tags-border-width: var(--border);
	--tags-border-radius: var(--border-radius);
	--tags-border-color: var(--color-gray-light);
	--tags-text-color: var(--rc-color-primary);
	--tags-background: #f2f3f5;
	--tags-avatar-size: 20px;

	/*
	* Forms - select avatar
	*/
	--select-avatar-size: 48px;
	--select-avatar-preview-size: 150px;
	--select-avatar-upload-background: var(--color-gray-light);
	--select-avatar-upload-color: #2d343d;

	/*
	* Sidebar
	*/
	--sidebar-width: 280px;
	--sidebar-small-width: 90%;
	--sidebar-background: var(--rc-color-primary-background);
	--sidebar-background-hover: var(--rc-color-primary-dark);
	--sidebar-background-light: var(--rc-color-primary-lightest);
	--sidebar-background-light-hover: var(--rc-color-primary-light);
	--sidebar-background-light-active: var(--rc-color-primary-light-medium);
	--sidebar-default-padding: 24px;
	--sidebar-small-default-padding: 16px;
	--sidebar-extra-small-default-padding: 12px;
	--sidebar-footer-height: 48px;
	--sidebar-small-header-padding: var(--sidebar-small-default-padding);

	/*
	* Sidebar flex
	*/
	--sidebar-flex-search-background: var(--color-white);
	--sidebar-flex-search-placeholder-color: var(--color-gray);

	/*
	* Sidebar Account
	*/
	--sidebar-account-thumb-size: 23px;
	--sidebar-small-account-thumb-size: 40px;
	--sidebar-account-status-bullet-size: 10px;
	--sidebar-small-account-status-bullet-size: 8px;
	--sidebar-account-status-bullet-radius: 50%;
	--sidebar-account-username-size: 1rem;
	--sidebar-account-username-weight: 700;
	--sidebar-small-account-username-weight: 400;
	--sidebar-account-username-color: var(--color-white);
	--sidebar-account-username-color-darker: var(--color-dark);
	--sidebar-account-status-font-size: 0.875rem;
	--sidebar-account-status-color: var(--color-gray);

	/*
	* Sidebar Item
	*/
	--sidebar-item-radius: 2px;
	--sidebar-item-height: 24px;
	--sidebar-item-height-medium: 34px;
	--sidebar-item-height-extended: 52px;
	--sidebar-item-thumb-size: 18px;
	--sidebar-item-thumb-size-medium: 27px;
	--sidebar-item-thumb-size-extended: 36px;
	--sidebar-item-text-color: var(--rc-color-primary-light);
	--sidebar-item-background: inherit;
	--sidebar-item-hover-background: var(--rc-color-primary-darkest);
	--sidebar-item-active-background: var(--rc-color-primary-dark);
	--sidebar-item-active-color: var(--sidebar-item-text-color);
	--sidebar-item-unread-color: var(--rc-color-content);
	--sidebar-item-unread-font-weight: 600;
	--sidebar-item-popup-background: var(--rc-color-primary-dark);
	--sidebar-item-user-status-size: 6px;
	--sidebar-item-user-status-radius: 50%;
	--sidebar-item-text-size: 0.875rem;

	/*
	* Modal
	*/
	--modal-wrapper-width: 650px;
	--modal-wrapper-margin: 3rem;
	--modal-back-button-color: var(--color-gray);

	/*
	* Modal - Create Channel
	*/
	--create-channel-gap-between-elements: 1rem;
	--create-channel-title-color: var(--color-darkest);
	--create-channel-title-text-size: 1.375rem;
	--create-channel-description-color: var(--color-gray);
	--create-channel-description-text-size: 0.875rem;

	/*
	* Toolbar
	*/
	--toolbar-placeholder-color: var(--color-gray);

	/*
	* Rooms list
	*/
	--rooms-list-title-color: var(--rc-color-primary-light);
	--rooms-list-title-text-size: 0.75rem;
	--rooms-list-empty-text-color: var(--color-gray);
	--rooms-list-empty-text-size: 0.75rem;
	--rooms-list-padding: var(--sidebar-default-padding);
	--rooms-list-small-padding: var(--sidebar-small-default-padding);

	/*
	* Chip
	*/
	--chip-background: #dddddd;

	/*
	* Avatar
	*/
	--avatar-radius: var(--border-radius);
	--avatar-initials-text-size: 22px;
	--avatar-initials-text-weight: 700;

	/*
	* Badge
	*/
	--badge-text-color: var(--color-white);
	--badge-radius: 12px;
	--badge-text-size: 0.75rem;
	--badge-background: var(--rc-color-primary-dark);
	--badge-unread-background: var(--color-blue);
	--badge-user-mentions-background: var(--color-red);
	--badge-group-mentions-background: var(--color-orange);

	/*
	* Mention link
	*/
	--mention-link-radius: 4px;
	--mention-link-background: #fff6d6;
	--mention-link-text-color: #b68d00;
	--mention-link-me-background: #ffe9ec;
	--mention-link-me-text-color: var(--color-red);
	--mention-link-group-background: #fde8d7;
	--mention-link-group-text-color: var(--color-orange);

	/*
	* Message box
	*/
	--message-box-text-size: var(--input-font-size);
	--message-box-placeholder-color: var(--color-gray-medium);
	--message-box-markdown-color: var(--color-gray);
	--message-box-markdown-hover-color: var(--color-dark);
	--message-box-user-typing-color: var(--color-gray);
	--message-box-user-typing-text-size: 0.75rem;
	--message-box-user-typing-user-color: var(--color-dark);
	--message-box-container-border-color: var(--color-gray-medium);
	--message-box-container-border-width: var(--border);
	--message-box-container-border-radius: var(--border-radius);
	--message-box-editing-color: #fff5df;
	--message-box-popover-title-text-color: var(--color-gray);
	--message-box-popover-title-text-size: 0.75rem;

	/*
	* Header
	*/
	--header-height: 77px;
	--header-padding: 16px;
	--header-toggle-favorite-color: var(--color-gray-medium);
	--header-toggle-favorite-star-color: var(--rc-color-alert-light);
	--header-toggle-encryption-off-color: var(--color-gray-medium);
	--header-toggle-encryption-on-color: var(--rc-color-alert-message-secondary);
	--header-title-username-color-darker: var(--color-dark);
	--header-title-font-size: var(--text-default-size);
	--header-title-font-size--subtitle: var(--text-small-size);
	--header-title-status-color: var(--color-gray);
	--header-title-username-weight: 400;
	--header-title-status-name-weight: 400;
	--header-title-status-bullet-radius: var(--status-bullet-radius);
	--header-title-status-bullet-size: var(--status-bullet-size);
	--header-background-color: var(--color-white);

	/*
	* Flex nav
	*/
	--flex-nav-background: var(--color-gray-lightest);

	/*
	* Popover
	*/
	--popover-padding: 1rem;
	--popover-radius: var(--border-radius);
	--popover-background: var(--color-white);
	--popover-column-min-width: 130px;
	--popover-column-padding: 1rem;
	--popover-title-color: var(--color-dark);
	--popover-title-text-size: 0.75rem;
	--popover-item-color: var(--color-dark);
	--popover-item-text-size: 0.875rem;
	--popover-divider-height: 2px;
	--popover-divider-color: var(--color-gray-light);

	/*
	* Tooltip
	*/
	--tooltip-background: var(--color-darkest);
	--tooltip-text-color: var(--color-white);
	--tooltip-text-size: 0.75rem;
	--tooltip-radius: var(--border-radius);

	/*
	* alert
	*/
	--alerts-padding: var(--sidebar-default-padding);
	--alerts-padding-vertical: 10px;
	--alerts-padding-vertical-large: 20px;
	--alerts-background: #1d73f5;
	--alerts-color: var(--color-white);
	--alerts-font-size: var(--text-default-size);
	--content-page-padding: 2.5rem;

	/*
	* badge
	*/
	--badge-size: 14px;
	--badge-font-size: 0.625rem;
}
